<template>
  <div class="contents">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="应付账款汇总" name="first"></el-tab-pane>
      <!-- <el-tab-pane label="采购结算流水" name="second"></el-tab-pane> -->
    </el-tabs>
    <!-- <div class="btn-fixed" v-if="activeName == 'first'">
      <el-button>导出</el-button>
    </div>
    <div class="btn-fixed" v-else>
      <el-button>导出</el-button>
    </div> -->
    <!-- <el-row :gutter="5"> -->
    <el-form
      :inline="true"
      label-position="right"
      label-width="80px"
      :model="dataFilter"
      ref="ruleForm"
    >
      <el-form-item label="搜索:" prop="search">
        <el-input
          style="width: 255px"
          v-model="dataFilter.search"
          class="writeWidth"
          placeholder="请输入供应商名称／手机号"
        />
      </el-form-item>
      <el-form-item label="起止日期:">
        <el-date-picker
          style="width: 233px"
          v-model="delivery_date"
          class="writeWidth"
          end-placeholder="结束日期"
          range-separator="-"
          start-placeholder="开始日期"
          type="daterange"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
      </el-form-item>
      <!-- <el-form-item label="手机号:" prop="p_phone">
        <el-input
          style="width: 200px"
          v-model="quertInfo.p_phone"
          placeholder="请输入手机号"
        ></el-input>
      </el-form-item> -->
      <el-button type="primary" @click="triggerCopeWithTheSummary()">
        查询
      </el-button>
      <el-button @click="resetForm('ruleForm')">重置</el-button>
      <!-- <el-col :span="3">
        <el-select v-model="value" placeholder="采购模式">
          <el-option label="采购模式" value="0"></el-option>
          <el-option label="市场自采" value="1"></el-option>
          <el-option label="供应商直供" value="2"></el-option>
        </el-select>
      </el-col> -->
      <!-- <el-col :span="4.5">
        <el-date-picker
          type="daterange"
          range-separator="-"
          start-placeholder="创建开始日期"
          end-placeholder="创建结束日期"
          style="width: 240px;"
          v-show="activeName == 'first'"
        ></el-date-picker>
      </el-col> -->
      <!-- <el-col :span="4.5">
        <el-date-picker
          type="daterange"
          range-separator="-"
          start-placeholder="计划交货开始日期"
          end-placeholder="计划交货结束日期"
          style="width: 290px;"
          v-show="activeName == 'first'"
        ></el-date-picker>
      </el-col> -->
      <!-- <el-col :span="4.5" v-show="activeName !== 'first'">
        <el-date-picker
          type="daterange"
          range-separator="-"
          start-placeholder="结算开始日期"
          end-placeholder="结算结束日期"
          style="width: 240px;"
        ></el-date-picker>
      </el-col> -->
      <!-- </el-row> -->
    </el-form>
    <div v-if="this.activeName == 'first'">
      <el-table :data="table1" style="width: 100%; margin-top: 10px">
        <el-table-column prop="supplier_name" label="供应商"></el-table-column>
        <!-- <el-table-column prop="group_name" label="集团名称"></el-table-column> -->
        <!-- <el-table-column prop="total" label="仓库"></el-table-column> -->
        <el-table-column prop="out_time" label="应付金额">
          <template slot-scope="scope">
            {{ (scope.row.sign_money - scope.row.return_money) / 100 }}
          </template>
        </el-table-column>
        <!-- <el-table-column label="已付金额"></el-table-column> -->
        <!-- <el-table-column prop="type" label="未付金额"></el-table-column> -->
        <!-- <el-table-column prop="cuser" label="联系人"></el-table-column> -->
        <el-table-column prop="supplier_phone" label="手机"></el-table-column>
      </el-table>
      <div style="margin-top: 20px;" v-show="false">
        <span style="padding: 0 6px">
          当前页合计应付金额:￥{{ combined.toFixed(2) / 100 }}
        </span>
      </div>
      <!-- <el-pagination
        background
        layout="total, prev, pager, next,sizes, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-size="this.params.size"
        :current-page="this.params.current"
        :page-sizes="[10, 20, 30, 40]"
        style="text-align: right"
        :total="totalAll"
      /> -->
    </div>
    <div v-else>
      <el-table :data="table2.list" style="width: 100%; margin-top: 10px">
        <el-table-column
          prop="goodsInfo.name"
          label="采购员/供应商"
        ></el-table-column>
        <el-table-column
          prop="goodsInfo.detail"
          label="结算单"
        ></el-table-column>
        <el-table-column
          prop="warehouseOutItems.unit"
          label="业务类型"
        ></el-table-column>
        <el-table-column
          prop="warehouseInfo.name"
          label="结算金额"
        ></el-table-column>
        <el-table-column prop="type" label="抹零"></el-table-column>
        <el-table-column
          prop="customerInfo.name"
          label="支付方式"
        ></el-table-column>
        <el-table-column
          prop="relativeOrderNo"
          label="原始单号"
        ></el-table-column>
        <el-table-column prop="out_time" label="对账日期"></el-table-column>
        <el-table-column
          prop="warehouseOutItems.qty"
          label="结算日期"
        ></el-table-column>
      </el-table>

      <el-pagination
        background
        layout="total, prev, pager, next,sizes, jumper"
        :page-size="10"
        :page-sizes="[10, 20, 30, 40]"
        style="text-align: right"
        :total="total"
      />
    </div>
  </div>
</template>

<script>
import { payableaccount, copeWithTheSummary } from '@/api/Finance/receiptSum'

export default {
  data() {
    return {
      dataFilter: {
        from_sign_date: '',
        to_sign_date: '',
        search: '',
      },
      combined: 0,
      delivery_date: [],
      // params: {
      //   current: 1,
      //   size: 10,
      // },
      // quertInfo: {
      //   from_sign_date: '',
      //   to_sign_date: '',
      //   p_phone: null,
      //   search: '',
      // },
      totalAll: 0,
      activeName: 'first',
      options: [],
      value: '',
      table1: [],
      opt2: [
        {
          value: '0',
          label: '全部类型',
        },
        {
          value: '1',
          label: '采购出库',
        },
        {
          value: '2',
          label: '其他出库',
        },
        {
          value: '3',
          label: '调货出库',
        },
        {
          value: '4',
          label: '订单退货',
        },
        {
          value: '5',
          label: '单位转换',
        },
        {
          value: '6',
          label: '期初出库',
        },
        {
          value: '7',
          label: '报溢出库',
        },
        {
          value: '8',
          label: '分割出库',
        },
      ],
      table2: [
        {
          name: '菜跟团',
        },
      ],
    }
  },
  created() {
    // this.triggerpayableaccount()
    this.triggerCopeWithTheSummary()
  },
  methods: {
    async triggerCopeWithTheSummary() {
      this.dataFilter.from_sign_date = this.delivery_date[0]
      this.dataFilter.to_sign_date = this.delivery_date[1]
      const res = await copeWithTheSummary(this.dataFilter)
      console.log(res, '1758')
      this.table1 = res.data
    },
    // ------------------------------
    // async triggerpayableaccount() {
    //   this.combined = 0
    //   this.quertInfo.from_sign_date = this.delivery_date[0]
    //   this.quertInfo.to_sign_date = this.delivery_date[1]
    //   const res = await payableaccount(this.params, this.quertInfo)
    //   console.log(res, '1908')
    //   this.table1 = res.list
    //   this.totalAll = res.total
    //   this.table1.forEach((item) => {
    //     this.combined =
    //       this.combined + (item.signfor_subtotal - item.return_price)
    //     console.log(item.customer_id, '114144')
    //     this.quertInfo.ci_id = item.customer_id
    //   })
    // },
    handleClick(tab) {
      console.log(tab.index)
    },
    //分页点击事件。
    handleSizeChange(val) {
      // this.params.size = val
      // this.triggerpayableaccount()
    },
    //分页点击事件。
    handleCurrentChange(val) {
      // this.params.current = val
      // this.triggerpayableaccount()
    },
    resetForm(formName) {
      this.delivery_date = []
      this.$refs[formName].resetFields()
    },
  },
}
</script>
<style lang="scss" scoped>
.contents {
  padding: 0 20px 10px;

  .totalMount {
    height: 30px;
    line-height: 30px;
    background: #e6e6e6;
    text-align: right;
    font-size: 15px;
    padding-right: 34px;
  }

  .btn-fixed {
    position: absolute;
    top: 24px;
    right: 40px;
    z-index: 12;
  }
}
</style>




